import React from 'react';
import './styles.scss';

/**
 * RenameModal 组件
 * 用于重命名对话标题的模态框
 * 
 * @param {Object} props
 * @param {boolean} props.isOpen - 是否显示模态框
 * @param {string} props.title - 模态框标题
 * @param {string} props.value - 输入框的值
 * @param {Function} props.onClose - 关闭模态框的回调函数
 * @param {Function} props.onSubmit - 提交的回调函数
 * @param {Function} props.onChange - 输入值变化的回调函数
 * @param {string} props.placeholder - 输入框的占位符
 */
const RenameModal = ({
    isOpen,
    title,
    value,
    onClose,
    onSubmit,
    onChange,
    placeholder
}) => {
    if (!isOpen) return null;

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit();
    };

    return (
        <div className="rename-modal">
            <div className="rename-modal__overlay" onClick={onClose} />
            <div className="rename-modal__content">
                <div className="rename-modal__header">
                    <h3 className="rename-modal__title">{title}</h3>
                    <button className="rename-modal__close" onClick={onClose}>
                        <i className="ri-close-line" />
                    </button>
                </div>
                <form className="rename-modal__form" onSubmit={handleSubmit}>
                    <input
                        type="text"
                        className="rename-modal__input"
                        value={value}
                        onChange={(e) => onChange(e.target.value)}
                        placeholder={placeholder}
                        autoFocus
                    />
                    <div className="rename-modal__actions">
                        <button
                            type="button"
                            className="rename-modal__button rename-modal__button--cancel"
                            onClick={onClose}
                        >
                            取消
                        </button>
                        <button
                            type="submit"
                            className="rename-modal__button rename-modal__button--submit"
                        >
                            确定
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default RenameModal; 